<template>
  <div class="app-container">
    <el-table :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column prop="idassignment" label="作业ID" width="180"></el-table-column>
      <el-table-column prop="title" label="作业名称"></el-table-column>
      <el-table-column prop="teacherName" label="教师名称" width="180"></el-table-column>
      <el-table-column prop="commence" label="发布日期" width="180"></el-table-column>
      <el-table-column prop="deadline" label="截止日期" width="180"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleShowProblem()">查看作业详情</el-button>
          <!-- (scope.$index, scope.row) -->
          <el-popover placement="right" width="400" trigger="click">
            <el-row>
              <el-col :span="12">
                <el-progress type="circle" :percentage="Math.trunc(100*Math.random())"></el-progress>
              </el-col>
              <el-col :span="12">
                <el-progress type="circle" :percentage="Math.trunc(100*Math.random())"></el-progress>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <p>提交率</p>
              </el-col>
              <el-col :span="12">
                <p>合格率</p>
              </el-col>
            </el-row>
            <el-button size="mini" slot="reference">查看提交概况</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <!-- <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button> -->

    <!-- <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />-->
    <!-- 
    <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
      <el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body></el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
      </div>
    </el-dialog>-->
    <!-- 查看题目 -->
    <el-dialog title="作业题目列表" :visible.sync="outerVisible1">
      <el-table :data="tempProblemlist" style="width: 100%">
        <el-table-column prop="id" label="题号" width="180"></el-table-column>
        <el-table-column prop="title" label="题目名" width="180"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleAssigmentDetail(scope.row)" type="text" size="small">查看</el-button>
            <!-- <el-button type="text" size="small">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <el-dialog width="70%" title="题目详情" :visible.sync="innerVisible1" append-to-body>
        <h2>Fibonacci</h2>
        <p>The Fibonacci Numbers{0,1,1,2,3,5,8,13,21,34,55...} are defined by the recurrence: F0=0 F1=1 Fn=Fn-1+Fn-2,n>=2 Write a program to calculate the Fibonacci Numbers.</p>
        <h3>Input:</h3>
        <p>Each case contains a number n and you are expected to calculate Fn.(0<=n<=30) 。</p>
        <h3>Output:</h3>
        <p>For each case, print a number Fn on a separate line,which means the nth Fibonacci Number.</p>
        <p>Sample Input: 1</p>
        <p>Sample Output: 1</p>
        <el-form>
          <el-form-item label="编译器">
            <el-select v-model="form.region" placeholder="GCC">
              <el-option label="GCC" value="gcc"></el-option>
              <el-option label="G++" value="g++"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <codemirror></codemirror>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmmit()">提交</el-button>
          <!-- 教师为“关闭”，学生为”提交 -->
        </div>
      </el-dialog>

      <!--提交结果对话框-->

      <el-dialog width="60%" title="检查结果" :visible.sync="innerVisible2" append-to-body>
        <el-tabs type="border-card">
          <el-tab-pane label="正确性检查">
            <p>
              状态：
              <el-button type="success">Accepted</el-button>
            </p>
            <p>耗时: 332 ms</p>
            <p>空间：4740 kb</p>
          </el-tab-pane>
          <el-tab-pane label="规范性检查">
            <p>检查状态：OK</p>
            <p>检查得分：{{styleScore}}</p>
            <p>日志</p>
            <el-input
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 15}"
              placeholder="规范性检查日志"
              v-model="styleLog"
            ></el-input>
          </el-tab-pane>

          <el-tab-pane label="静态代码检查">
            <p>检查状态：OK</p>
            <p>检查得分：{{staticScore}}</p>
            <p>日志</p>
            <el-input
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 15}"
              placeholder="静态代码检查日志"
              v-model="staticLog"
            ></el-input>
          </el-tab-pane>
        </el-tabs>

        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="innerVisible2 = false">确 认</el-button>
        </div>
      </el-dialog>

      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="outerVisible1 = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import {
//   fetchList,
//   fetchPv,
//   createArticle,
//   updateArticle
// } from "@/api/article";
import { fetchList, fetchListByStuId } from "@/api/assignment";
import waves from "@/directive/waves"; // Waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { codemirror } from "vue-codemirror-lite";

export default {
  name: "DoWork",
  components: { Pagination, codemirror },
  directives: { waves },
  data() {
    return {
      // tableKey: 0,
      outerVisible: false,
      innerVisible: false,
      outerVisible1: false,
      innerVisible1: false,
      innerVisible2: false,
      list: [],
      total: 0,
      listLoading: true,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      tempProblemlist: [
        { id: 0, title: "HelloWorld" },
        { id: 1, title: "A+B" },
        { id: 2, title: "Fibonacci sequence" }
      ],
      cdoe: "", //源代码
      styleScore: 98.0,
      styleLog: `File,Line,Column,Message,Rule,Rule Url
D:\Development\IdeaProjects\oj\plugins\style-checker\style-checker-testcases\fibonacci.cpp,3,5,Should provide doxygen style comments in front of function(fibonacci).,RULE_5_3_A_provide_doxygen_function_comment_on_function_in_impl,
D:\Development\IdeaProjects\oj\plugins\style-checker\style-checker-testcases\fibonacci.cpp,15,5,Should provide doxygen style comments in front of function(main).,RULE_5_3_A_provide_doxygen_function_comment_on_function_in_impl,
`,
      staticScore: 100,
      staticLog: `Great! Check it out!`,
      listQuery: {
        //分页
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: "+id"
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      // this.total = this.list.length
      // console.log(this.total)
      this.listLoading = true;
      var token = this.$store.getters.token;
      console.log(token);
      fetchListByStuId(token).then(response => {
        // console.log(response.data.data);
        this.list = response.data.data;

        var str = {
          //  选中了题目3，4，5
          idassignment: 2,
          title: "简单实验1",
          teacherName: "教师1",
          commence: "2019-04-08",
          deadline: "2019-06-08",
          status: "已开始"
        };
        var str1 = {
          idassignment: 4,
          title: "验证型实验1",
          teacherName: "老师1",
          commence: "2019-06-08",
          deadline: "2019-05-29",
          status: "未开始"
        };
        this.list = new Array(...this.list, str, str1);
        this.total = response.data.total;
      });

      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items;
      //   this.total = response.data.total;
      //   // Just to simulate the time of the request
      //   setTimeout(() => {
      //     this.listLoading = false;
      //   }, 1.5 * 1000);
      // }
      // );//暂不分页
    },
    handleShowProblem() {
      this.outerVisible1 = true;
    },
    handleCheck(index, row) {
      console.log(index);
      console.log(row.idassignment);
    },
    handleAssigmentDetail(row) {
      this.innerVisible1 = true;
      console.log("查看了题目详情" + row);
    },
    handleSubmmit() {
      setTimeout(() => {
        this.innerVisible1 = false;
      }, 2000);
      setTimeout(() => {
        this.innerVisible2 = true;
      }, 3000);
    }
    // handleCreate() {
    //   this.resetTemp();
    //   this.dialogStatus = "create";
    //   this.dialogFormVisible = true;
    //   this.$nextTick(() => {
    //     this.$refs["dataForm"].clearValidate();
    //   });
    // },
    // createData() {
    //   this.$refs["dataForm"].validate(valid => {
    //     if (valid) {
    //       this.temp.id = parseInt(Math.random() * 100) + 1024; // mock a id
    //       this.temp.author = "vue-element-admin";
    //       createArticle(this.temp).then(() => {
    //         this.list.unshift(this.temp);
    //         this.dialogFormVisible = false;
    //         this.$notify({
    //           title: "成功",
    //           message: "创建成功",
    //           type: "success",
    //           duration: 2000
    //         });
    //       });
    //     }
    //   });
    // },
    // handleUpdate(row) {
    //   this.temp = Object.assign({}, row); // copy obj
    //   this.temp.timestamp = new Date(this.temp.timestamp);
    //   this.dialogStatus = "update";
    //   this.dialogFormVisible = true;
    //   this.$nextTick(() => {
    //     this.$refs["dataForm"].clearValidate();
    //   });
    // },
    // updateData() {
    //   this.$refs["dataForm"].validate(valid => {
    //     if (valid) {
    //       const tempData = Object.assign({}, this.temp);
    //       tempData.timestamp = +new Date(tempData.timestamp); // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
    //       updateArticle(tempData).then(() => {
    //         for (const v of this.list) {
    //           if (v.id === this.temp.id) {
    //             const index = this.list.indexOf(v);
    //             this.list.splice(index, 1, this.temp);
    //             break;
    //           }
    //         }
    //         this.dialogFormVisible = false;
    //         this.$notify({
    //           title: "成功",
    //           message: "更新成功",
    //           type: "success",
    //           duration: 2000
    //         });
    //       });
    //     }
    //   });
    // },
    // handleDelete(row) {
    //   this.$notify({
    //     title: "成功",
    //     message: "删除成功",
    //     type: "success",
    //     duration: 2000
    //   });
    //   const index = this.list.indexOf(row);
    //   this.list.splice(index, 1);
    //}
  }
};
</script>
